import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Form, Input, Col, Row } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import OneItem from './OneItem'
import { SectionText } from '../styled';
import { SearchRow } from '@/styled/form';

const { TextArea } = Input;
interface Props extends FormComponentProps {
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  data?: {
    id?: number,
    name?: string,
    flagName?: string,
    intro?: string,
    address?: string,
    corporation?: string,
    corporationMobile?: string,
    corporationPhone?: string,
    proFireManagerName?: string,
    proFireManagerMobile?: string,
    proFireManagerPhone?: string,
    industryTypeName?: string,
    peopleScale?: string,
    ownerPhone?: string,
    ownerFax?: string,
    ownerEmail?: string,
    x?: number,
    y?: number,
    typeName?: string,
    economicType?: string,
    postalCode?: string,
    propertyOwnerName?: string
    image?: string,
    areaId?: number,
    areaName?: string,
    ownerCodeName: number,
    registerTime?: string,
    bindStatus?: String,
    industryType?: string,
    relationName?: string,
    relationUser?: string,
    asset?: string,
    floorSpace?: string,
    keySite?: string,
    keyOffer?: string,
    fireOwnerNum?: string,
  },
  img?: {
    url: string,
    message: string,
  },
  keys?: Array<string>,
  dict?: any,
  provice?: Array<any>,
  sub?: Array<any>,
  relationList: Array<any>,
  ownerList: Array<any>,
  propertyList: Array<any>,
}

@connect(({ owner, location, upload }) => ({
  dict: owner.dict || {},
  img: upload.imgValue,
  provice: location.provice,
  sub: location.sub,
  relationList: owner.relationList || [],
  propertyList: owner.newPropertyList || [],
  ownerList: owner.ownerList || [],
}))
class OwnerForm extends Component<Props, any> {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
    isNew: true,
    fireVisible: false,
    maintenanceVisible: false,
    propertyVisible: false,
    option: [],
    fireOwnerName: '',
    maintenanceOwnerName: '',
    propertyOwnerName: '',
    areaList: [],
    areaId: '',
    areaName: '',
    fireOn: null,
    relationUser: '',
    relationId: '',
    submitConfirm: false,
    image: '',
  };

  componentDidMount() {
    const { data, form, dispatch } = this.props;

    if (data) {

      const { id, name, flagName, intro, image, address, industryTypeName, corporation, corporationMobile, corporationPhone,
        proFireManagerName, proFireManagerMobile, proFireManagerPhone, relationName, relationUser, typeName, economicType,
        bindStatus, x, y, peopleScale, ownerPhone, ownerFax, ownerEmail, postalCode, propertyOwnerName, ownerCodeName,
        registerTime, areaName, asset, floorSpace, keySite, keyOffer, fireOwnerNum
      } = data;

      const ans = {
        position: `${x || ''},${y || ''}`,
        registerTime: registerTime ? moment(registerTime, 'YYYY-MM-DD') : null,
        relationUser, flagName, name, intro, image, address, industryTypeName, corporation, corporationMobile, corporationPhone, asset,
        proFireManagerName, proFireManagerMobile, proFireManagerPhone, relationName, peopleScale, areaName, ownerPhone, ownerFax, ownerEmail,
        typeName, economicType, postalCode, propertyOwnerName, floorSpace, keySite, keyOffer, fireOwnerNum, ownerCodeName,
      };

      this.setState({
        image,
        fireOn: bindStatus === '1' ? true : false,
      }, () => form.setFieldsValue(ans));

    }
  }

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { fireOn, image } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 6 },
        sm: { span: 14 },
      },
    };
    const textAreaLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    return (
      <Form>
        <SearchRow style={{ backgroundColor: '#FAFAFA', height: '55px', alignItems: 'center', marginBottom: 32 }}>
          <SectionText>基础信息</SectionText>
        </SearchRow>
        <Row>
          <Col span={8}>
            <OneItem title='单位属性' require={false} type='flagName' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='单位名称' require={false} type='name' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='所属行业类型' require={false} type='industryTypeName' form={form} placeholder=" " />
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <OneItem title='所属区域' require={false} type='areaName' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='详细地址' require={false} type='address' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='单位坐标' require={false} type='position' form={form} placeholder=" " />
          </Col>
        </Row>
        <Row>
          <Col span={16} style={{ marginLeft: -30 }}>
            <Form.Item
              {...textAreaLayout}
              label='单位简介'
            >
              {getFieldDecorator('intro', {
                rules: [{
                  required: false, message: '请输入简介', whitespace: true
                }, {
                  type: 'string', max: 288, message: '不可超过144个数字'
                }],
              })(
                <TextArea title='单位简介' rows={4} placeholder=" " />
              )}
            </Form.Item>
          </Col>
          <Col span={8} style={{ marginLeft: 30 }}>
            {image ? <Form.Item
              {...formItemLayout}
              label='单位图片'
            >
              <img src={image} height="120px" width="80%" />
            </Form.Item> : null}
          </Col>
        </Row>
        {fireOn ? <><SearchRow style={{ backgroundColor: '#FAFAFA', height: '55px', alignItems: 'center', marginBottom: 32 }}>
          <SectionText>单位消防评定</SectionText>
        </SearchRow>
          <Row>
            <Col span={8}>
              <OneItem title='主管部门' require={false} type='relationName' form={form} placeholder=" " />
            </Col>
            <Col span={8}>
              <OneItem title='监管负责人' require={false} type='relationUser' form={form} placeholder=" " />
            </Col>
            <Col span={8} />
          </Row></> : null}
        <SearchRow style={{ backgroundColor: '#FAFAFA', height: '55px', alignItems: 'center', marginBottom: 32 }}>
          <SectionText>联系方式</SectionText>
        </SearchRow>
        <Row>
          <Col span={8}>
            <OneItem title='单位电话' require={false} type='ownerPhone' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='单位传真' require={false} type='ownerFax' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='单位邮箱' require={false} type='ownerEmail' form={form}
              inputType='email' typeMessage='请输入正确的邮箱地址!' placeholder=" "
            />
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <OneItem title='消防责任人' require={false} type='corporation' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='手机号码' require={false} type='corporationMobile' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='联系电话' require={false} type='corporationPhone' form={form} placeholder=" " />
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <OneItem title='消防管理人' require={false} type='proFireManagerName' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='手机号码' require={false} type='proFireManagerMobile' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='联系电话' require={false} type='proFireManagerPhone' form={form} placeholder=" " />
          </Col>
        </Row>
        <SearchRow style={{ backgroundColor: '#FAFAFA', height: '55px', alignItems: 'center', marginBottom: 32 }}>
          <SectionText>详细资料</SectionText>
        </SearchRow>
        <Row>
          <Col span={8}>
            <OneItem title='成立时间' require={false} type='registerTime' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='单位邮编' require={false} type='postalCode' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='物业单位' require={false} type='propertyOwnerName' form={form} placeholder=" " />
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <OneItem title='单位类型' require={false} type='typeName' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='经济类型' require={false} type='economicType' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='单位代码' require={false} type='ownerCodeName' form={form} placeholder=" " />
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item
              {...formItemLayout}
              label='固定资产'
            >
              {getFieldDecorator('asset')(
                <Input style={{ width: '100%' }} addonAfter="万" placeholder=" " />
              )}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              {...formItemLayout}
              label='职工人数'
            >
              {getFieldDecorator('peopleScale')(
                <Input style={{ width: '100%' }} addonAfter="人" placeholder=" " />
              )}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              {...formItemLayout}
              label='占地面积'
            >
              {getFieldDecorator('floorSpace')(
                <Input style={{ width: '100%' }} addonAfter="m²" placeholder=" " />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <OneItem title='重点部位数' require={false} type='keySite' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='重点工种数' require={false} type='keyOffer' form={form} placeholder=" " />
          </Col>
          <Col span={8}>
            <OneItem title='防火机构人数' require={false} type='fireOwnerNum' form={form} placeholder=" " />
          </Col>
        </Row>
      </Form >
    );
  }
}

const FormList = Form.create<Props>()(OwnerForm);
export default FormList;
